<template>
  <div>
    <div ref="chart" style="width: 90vw;min-height: 300px;height: 50vh;"></div>
    <el-table :data="list">
      <!-- <el-table-column label="卡号" prop="key" /> -->
      <el-table-column label="储物柜ID" prop="deviceId" />
      <el-table-column label="储物仓序号" prop="deviceIndex" />
      <el-table-column label="使用次数" prop="count" />
      <el-table-column label="使用时长(分)" prop="minute" />
      <el-table-column label="使用时长(秒)" prop="second" />
    </el-table>
  </div>
</template>
<script>
  import deviceAnalysisAPI from '@/api/device/analysis'
  import * as echarts from 'echarts'
  const options = {
    title: {
      //text: '{num|' + dataACTemp.value + '℃}',

      x: '49%',
      y: '20%',
      textAlign: 'center',
      textStyle: {
        rich: {
          num: {
            fontWeight: '500',
            color: '#0a8dd3',
            fontFamily: '微软雅黑',
            fontSize: 35,
          },
        }
      },
      subtextStyle: {
        color: '#0a8dd3',
      }
    },
    tooltip: {
      show: true
    },
    grid: [{
        top: '8%',
        bottom: '3%',
        height: '40%'
      },
      {
        top: '55%',
        bottom: '3%',
        height: '40%'
      }
    ],
    xAxis: [{
      type: 'category'
    }, {
      type: 'category',
      gridIndex: 1
    }],
    yAxis: [{
      name: '次数',
      type: 'value'
    }, {
      name: '时长(分)',
      gridIndex: 1,
      type: 'value'
    }],
    series: [{
      name: '使用次数',
      type: 'bar'
    }, {
      name: '使用时长(分)',
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      gridIndex: 1
    }]
  }
  export default {
    name: 'DeviceChildrenAnalysis',
    data() {
      return {
        list: [],
        chart: null,
      }
    },
    created() {
      this.queryData()
    },
    mounted() {
      setTimeout(this.createChart, 300)
    },
    methods: {
      queryData() {
        const vm = this
        deviceAnalysisAPI.childrenTime({
          startDate: null,
          endDate: null
        }).then(res => {
          vm.list = [].concat(res.data)
          vm.updateChart()
        })
      },
      createChart() {
        const el = this.$refs['chart']
        this.chart = echarts.init(el);
        this.chart.setOption(options)
        this.updateChart();
      },
      updateChart() {
        if (this.list.length === 0 || this.chart === null) {
          return
        }
        this.chart.setOption({
          dataset: [{
            dimensions: ['deviceIndex', 'count', 'minute'],
            source: this.list
          }]
        });
      }
    }
  }

</script>
